<script setup lang="ts">
import { reactive, ref } from 'vue';
import { UserAPI } from '@/api';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useAuthStore } from '@/store'
import { useRouter } from 'vue-router';

const userModel = reactive({ oldPwd: "", newPwd: "" });
const router = useRouter();
const formRef = ref<FormInstance | null>(null);
const rules: FormRules = {
    oldPwd: [
        { required: true, message: "*原始密码不能为空", trigger: "blur" },
        { min: 3, max: 20, message: "*密码长度3 - 20", trigger: "blur" }
    ],
    newPwd: [
        { required: true, message: "*新密码不能为空", trigger: "blur" },
        { min: 3, max: 20, message: "*新密码长度3 - 20", trigger: "blur" }
    ],
};

const ok = async () => {
    try {
        await UserAPI.pwdchange(userModel);
        useAuthStore().logout();
        ElMessage({ message: `密码已修改，请重新登录...`, type: 'success' });
        router.replace('/login');
    }
    catch (e) { console.log(e) }
};
</script>

<template>
    <el-container>
        <el-form ref="formRef" :model="userModel" :rules="rules" status-icon>
            <el-form-item>
                <h3>- 修改密码 -</h3>
            </el-form-item>
            <el-form-item prop="oldPwd">
                <el-input v-model="userModel.oldPwd">
                    <template #prepend><span class="input-tip">原始密码: </span></template>
                    <template #append>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item prop="newPwd">
                <el-input v-model="userModel.newPwd">
                    <template #prepend><span class="input-tip">新密码: </span></template>
                    <template #append>
                        <el-icon>
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <div class="button">
                <el-button size="large" color="#b85d71" plain @click="ok">确定</el-button>
            </div>
        </el-form>
    </el-container>
</template>

<style scoped>
.el-form {
    background-color: rgba(255, 255, 255, 0.6);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 10px;
    padding: 50px 150px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 1px #d0d0d0;
}

h3 {
    font-size: 22px;
    font-weight: normal;
}

.el-form-item__label {
    color: #fff !important;
}

.el-input__inner {
    width: 150px;
}

.input-tip {
    width: 50px;
}
</style>
